<template>
	<view class="courselist">
		<view class="course">
			<view class="left">
				<view class="cover">
					<image :src="course.cover" mode="aspectFill"></image>
				</view>
				<view class="title">
					课程名称：<br />{{course.title}}
				</view>
				<view class="price">
					价格：{{course.price}}元
				</view>
				<view class="status">
					课程状态：
					<text class="normal" v-if="course.status=='Normal'" style="color: green;">已上架</text>
					<text class="draft" v-if="course.status=='Draft'" style="color: red;">未上架</text>
				</view>
				<view class="lessonNum">
					课时：{{course.lessonNum}}课时
				</view>
			</view>
			<view class="right">
				<view class="status">
					<view class="text" v-if="course.checkStatus=='1'" style="color: green;">审核通过</view>
					<view class="text" v-if="course.checkStatus=='0'" style="color: red;">未通过</view>
					<view class="text" v-if="course.checkStatus=='2'" style="color: blue;">待审核</view>
				</view>
				<view class="upload" v-if="course.checkStatus==1">
					<button @click="showUploadDrawer">上传视频</button>
					<uni-drawer ref="uploadRef" mode="right" :width="320">
						<view class="close">
							<button @click="closeUploadDrawer">
								<text class="word-btn-white">关闭Drawer</text>
							</button>
							<view class="uploadvideo">
								<view class="content">
									<uni-forms v-model="videoData" :rules="rules" ref="videoRef">
										<uni-forms-item name="videoSourceId">
											<view class="addvideo" v-if="videoData.videoSourceId==''"
												@click="chooseVideo">
												<text>点击添加视频</text>
											</view>
											<view class="video" v-if="videoData.videoSourceId!=''">
												<video :src="videoData.videoSourceId"></video>
												<uni-icons type="closeempty" size="20" @click="deleteVideo"></uni-icons>
												<view class="filename">{{fileName}}</view>
											</view>
										</uni-forms-item>
										<uni-forms-item name="title">
											<uni-easyinput placeholder="合适的标题可以吸引更多人观看哦~"
												v-model="videoData.title"></uni-easyinput>
										</uni-forms-item>
									</uni-forms>
								</view>
								<view class="footer">
									<button @click="submit(course.id)">提交</button>
								</view>
							</view>
						</view>
					</uni-drawer>
				</view>
				<view class="courses" v-if="course.checkStatus==1">
					<button @click="showVideoDrawer(course.id)">视频列表</button>
					<uni-drawer ref="videoListRef" mode="right" :width="320">
						<view class="close">
							<view class="scroll-view">
								<scroll-view class="scroll-view-box" scroll-y="true">
									<button @click="closeVideoDrawer">
										<text class="word-btn-white">关闭Drawer</text>
									</button>
									<view class="updateCourse">
										<scroll-view scroll-y="true">
											<video-item v-for="item in videoList" :video="item"
												:key="item.id"></video-item>
										</scroll-view>
									</view>
								</scroll-view>
							</view>
						</view>
					</uni-drawer>
				</view>
				<view class="update" v-if="course.checkStatus==1">
					<button @click="showUpdateDrawer">修改</button>
					<uni-drawer ref="updateRef" mode="right" :width="320">
						<view class="close">
							<button @click="closeUpdateDrawer">
								<text class="word-btn-white">关闭Drawer</text>
							</button>
							<view class="updateCourse">
								<view class="cover">
									课程封面：
									<image :src="course.cover" mode="aspectFill"></image>
									<button @click="changeCover"><uni-icons fontFamily="myFont"
											size="18">{{'\ue622'}}</uni-icons>&nbsp;修改课程封面</button>
								</view>
								<view class="status">
									<text>课程上下架：</text>
									<switch color="pink" :checked="course.status=='Normal'"
										style="transform:scale(0.8)" @change="onChange"></switch>
								</view>
							</view>
						</view>
					</uni-drawer>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		apiUploadVideo,apiGetVideos,apiUpdateCourse
	} from '../../apis/course.js'
	const uploadRef = ref(false)
	const updateRef = ref(false)
	const fileName = ref('')
	const videoRef = ref(null)
	const videoListRef = ref(null)
	const videoList = ref([])
	const status = ref('')
	const rules = ref({
		videoSourceId: {
			rules: [{
				required: true,
				errorMessage: '请上传视频'
			}]
		},
		title: {
			rules: [{
				required: true,
				errorMessage: '请输入标题'
			}]
		}
	})
	const objCourse=defineProps({
		course: {}
	})
	const showUploadDrawer = () => {
		uploadRef.value.open()
	}
	const showVideoDrawer = (id) => {
		videoListRef.value.open()
		getVideos(id)

	}
	const getVideos = async (id) => {
		const res = await apiGetVideos(id)
		videoList.value = res.data.data
		console.log(videoList.value)
		console.log(res)
	}
	const closeUploadDrawer = () => {
		videoData.value = {
			courseId: '',
			videoSourceId: '',
			title: '',
			duration: '',
			size: ''
		}
		uploadRef.value.close()
	}
	const showUpdateDrawer = () => {
		updateRef.value.open()
	}
	const closeUpdateDrawer = () => {
		updateRef.value.close()
	}
	const closeVideoDrawer = () => {
		videoListRef.value.close()
	}
	const videoData = ref({
		courseId: '',
		videoSourceId: '',
		title: '',
		duration: '',
		size: ''
	})
	const submit = (id) => {
		videoData.value.courseId = id
		console.log(videoData.value)
		videoRef.value.validate().then(() => {
			uploadVideo(videoData.value)
			uni.showToast({
				title: '上传成功',
				icon: 'success'
			})
			closeUploadDrawer()
		}).catch(err => {
			uni.showToast({
				title: '请填写完整信息',
				icon: 'error'
			})
		})
	}
	const uploadVideo = async (video) => {
		const res = await apiUploadVideo(video)
		console.log(res)
	}
	// 选择视频
	const chooseVideo = (e) => {
		uni.chooseVideo({
			count: 1,
			sourceType: ['album'],
			success: (e) => {
				console.log(e)
				const tempVideoPath = e.tempFilePath
				fileName.value = e.name
				let duration = String(e.duration);
				const index = duration.indexOf(".");
				duration = duration.substring(0, index);
				videoData.value.duration = duration
				let size = String(e.size / 1024 / 1024);
				const index2 = size.indexOf(".");
				size = size.substring(0, index2);
				videoData.value.size = size
				console.log(size)
				uni.uploadFile({
					url: 'http://172.16.7.75:82/teacher/testupload',
					filePath: tempVideoPath,
					name: 'file',
					success: (res) => {
						const data = JSON.parse(res.data)
						videoData.value.videoSourceId = data.data
						uni.showToast({
							title: '上传成功',
							icon: 'success'
						})
					},
					fail: (err) => {
						uni.showToast({
							title: '上传失败',
							icon: 'error'
						})
					}
				})
			}
		})
	}
	const deleteVideo = () => {
		videoData.value.videoSourceId = ''
	}
	const changeStatus=async(course)=>{
		const res=await apiUpdateCourse(course)
		console.log(res)
		if(res.data.code==200){
			uni.showToast({
				title: '修改成功',
				icon: 'success'
			})
		}else{
			uni.showToast({
				title: '修改失败',
				icon: 'error'
			})
		}
	}
	const onChange = (e) => {
		if(e.detail.value){
			objCourse.course.status='Normal'
			changeStatus(objCourse.course)
		}else{
			objCourse.course.status='Draft'
			changeStatus(objCourse.course)
		}
	}
	const changeCover=()=>{
		uni.chooseImage({
			count: 1,
			sourceType: ['album'],
			success: (e) => {
				const tempFilePaths = e.tempFilePaths
				uni.uploadFile({
					url: 'http://172.16.7.75:82/teacher/upload',
					filePath: tempFilePaths[0],
					name: 'file',
					success: (res) => {
						const data = JSON.parse(res.data)
						objCourse.course.cover=data.data
						uni.showToast({
							title: '上传成功',
							icon: 'success'
						})
						updateCourse(objCourse.course)
					},
					fail: (err) => {
						uni.showToast({
							title: '上传失败',
							icon: 'error'
						})
					}
				})
			}
		})
	}
	const updateCourse=async(course)=>{
		const res=await apiUpdateCourse(course)
		console.log(res)
		if(res.data.code==200){
			uni.showToast({
				title: '修改成功',
				icon: 'success'
			})
		}else{
			uni.showToast({
				title: '修改失败',
				icon: 'error'
			})
		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: myFont;
		src: url('../../static/ttf/iconfont.ttf');
	}

	.courselist {
		background: #eee;
		border-radius: 10rpx;
		margin: 20rpx;
		padding: 20rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

		.course {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;

			.left {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
				gap: 10rpx;

				.cover {
					width: 200rpx;
					height: 120rpx;
					border-radius: 10rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.title {
					width: 250rpx;
					font-size: 30rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.lessonNum {
					font-size: 24rpx;
					color: #999;
				}

				.price {
					font-size: 30rpx;
					color: #ff0000;
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 10rpx;

				.status {
					.text {
						font-size: 30rpx;
						color: #999;
					}
				}

				.upload {
					button {
						width: 160rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 24rpx;
						color: #fff;
						background-color: #007aff;
						border-radius: 30rpx;
					}

					.close {
						padding: 20rpx;

						.uploadvideo {
							width: 100%;
							padding: 20rpx;

							.content {
								width: 100%;

								.addvideo {
									width: 100%;
									height: 300rpx;
									background: #eee;
									border-radius: 10rpx;
									display: flex;
									flex-direction: column;
									justify-content: center;
									align-items: center;
									color: #666;
									font-size: 24rpx;

									.icon {
										font-size: 60rpx;
									}
								}

								.video {
									display: flex;
									flex-direction: column;
									align-items: center;
									justify-content: center;
									border: 1px dashed #ccc;
									padding: 16px;
									border-radius: 4px;
									width: 100%;
									height: 200px;
									position: relative;

									video {
										width: 100%;
										height: 100%;
										// object-fit: cover;
									}

									.uni-icons {
										position: absolute;
										top: 8px;
										left: 8px;
										cursor: pointer;
										background: #666;
										border-radius: 50%;
										padding: 4px;
										color: #fff;
										z-index: 1;
									}

									.filename {
										width: 250rpx;
										height: 60rpx;
										font-size: 14px;
										color: #333;
										background-color: rgba(255, 255, 255, 0.8);
										padding: 4px 8px;
										border-radius: 4px;
										position: absolute;
										bottom: 8px;
										left: 8px;
										z-index: 1;
										white-space: nowrap;
										overflow: hidden;
										text-overflow: ellipsis;
									}
								}

							}
						}

						button {
							width: 100%;
							height: 60rpx;
							line-height: 60rpx;
							text-align: center;
							font-size: 24rpx;
							color: #fff;
							background-color: #007aff;
							border-radius: 30rpx;
						}
					}
				}

				.update {
					button {
						width: 150rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 24rpx;
						color: #fff;
						background-color: #ff0000;
						border-radius: 30rpx;
					}

					.close {
						padding: 20rpx;

						button {
							width: 100%;
							height: 60rpx;
							line-height: 60rpx;
							text-align: center;
							font-size: 24rpx;
							color: #fff;
							background-color: #ff0000;
							border-radius: 30rpx;
						}

						.updateCourse {
							width: 400rpx;
							margin: 0 auto;
							padding: 30rpx;

							.cover {
								position: relative;

								image {
									width: 100%;
									height: 300rpx;
									border-radius: 10rpx;
								}

								button {
									position: absolute;
									bottom: 0;
									left: 0;
									display: flex;
									justify-content: center;
									align-items: center;
									width: 100%;
									height: 60rpx;
									font-size: 24rpx;
									color: black;
									background-color: rgba(255, 255, 255, 0.8);
									border-radius: 0;
								}
							}

							.status {
								display: flex;
								align-items: center;
								margin-top: 30rpx;

							}
						}
					}
				}

				.courses {
					button {
						width: 150rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 24rpx;
						color: #fff;
						background-color: green;
						border-radius: 30rpx;
					}

					.close {
						padding: 20rpx;

						.scroll-view {
							/* #ifndef APP-NVUE */
							width: 100%;
							height: 100%;
							/* #endif */
							flex: 1;

							// 处理抽屉内容滚动
							.scroll-view-box {
								padding-top: 30rpx;
								flex: 1;
								position: absolute;
								top: 0;
								right: 0;
								bottom: 0;
								left: 0;

								button {
									width: 95%;
									height: 60rpx;
									line-height: 60rpx;
									text-align: center;
									font-size: 24rpx;
									color: #fff;
									background-color: green;
									border-radius: 30rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>